<template>
  <div>
    <el-form :label-position="labelPosition"
             label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item v-for="field in leftFields"
                        :key="field.prop"
                        :label="field.label">
            <span>{{ companyValue[field.prop] || "--" }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item v-for="field in rightFields"
                        :key="field.prop"
                        :label="field.label">
            <span>{{ companyValue[field.prop] || "--" }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="form-edit-btn">
        <el-button type="primary"
                   icon="el-icon-edit"
                   @click="handleEdit">编辑</el-button>
      </el-form-item>
    </el-form>
    <UserBasicInfoForm v-model="visible"
                       :form="formData"
                       @refresh="handleRefresh" />
  </div>
</template>

<script>
import UserBasicInfoForm from './UserBasicInfoForm.vue'

const leftFields = [
  { label: "公司网站", prop: "url" },
  { label: "公司简称", prop: "abbr" },
  { label: "所属行业", prop: "industry" },
  { label: "公司所在城市", prop: "localization" },
  { label: "联系电话", prop: "contactMobile" },
  { label: "联系人", prop: "contactName" },
]

const rightFields = [
  { label: "开户银行", prop: "bankName" },
  { label: "银行账号", prop: "bankAccount" },
  { label: "开户地址", prop: "bankAddress" },
  { label: "公司地址", prop: "companyAddress" },
  { label: "传真", prop: "fax" }
]


export default {
  name: "UserBasicInfo",
  components: { UserBasicInfoForm },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      labelPosition: 'right',
      formData: {},
      leftFields,
      rightFields,
      visible: false
    }
  },
  computed: {
    companyValue () {
      const { company } = this.value
      return {
        ...company,
        companyAddress: company?.address?.address,
        localization: `${company?.address?.province}${company?.address?.city}${company?.address?.district}`
      }
    }
  },
  created () {
  },
  methods: {
    handleEdit () {
      this.formData = this.companyValue
      this.visible = true
    },
    handleRefresh () {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss" scoped>
.form-edit-btn {
  // margin-bottom: 0 !important;
}
</style>